<template>
	<view>
		<view id="app" class="app-height withdraw">
		    <view class="bg">
		        <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon106.png"/>	
		    </view>
		    <view class="enter">
		        <view class="withdraw-amount">
		            <view class="amount-price">
		                <view class="span">￥</view>
		                <input class="price" type="number" v-model="withdrawMoney" placeholder="请输入提现金额（最低1元，1元=1金币）"/>
		            </view>
		            <view class="amount-all">
		                <view v-if="account >= withdrawMoney">可提现金币：<view class="span">{{account+'金币'}}</view></view>
		                <view v-else><view class="span" style="color: red">输入金额超过余额</view></view>
		                <view @click="withdrawMoney = account">全部提现</view>
		            </view>
		            <view class="btn">
		                <view class="button" @click="toPreWithdraw">确认提现</view>
		                <!--                <button class="button" @click="toWithdraw">确认提现2</button>-->
		                <view class="text">您会在T+1个工作日内收到提现款项</view>
		            </view>
		        </view>
		    </view>
		    <view class="pay-module" v-if="show">
		        <view class="popup-module  withdraw02-popup">
		            <view class="popup-bg"></view>
		            <view class="popup-content">
		                <view class="header"><image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/popup-close.png"
		                                         @click="close"/> 请输入短信验证码
		                </view>
		                <view class="price-title">
		                    零钱提现
		                </view>
		                <view class="price-money">
		                    <view class="span">￥</view>{{preWithdrawMoney}}
		                </view>
		
		                <view class="price-num"><view class="span">服务费</view>
		                    <view>￥{{serviceCharge}}</view>
		                </view>
		                <view class="price-num"><view class="span">费率</view>
		                    <view>2%（最低0.01）</view>
		                </view>
		                <view class="pwd">
		                    <input class="price" type="number" ref="codeInput" v-model="verificationCode" placeholder="请输入六位短信验证码"
		                           @keyup.enter="toWithdraw"/>
		                </view>
		
		            </view>
		        </view>
		
		    </view>
		</view>
	</view>
</template>

<script>
import commonApi from '@/utils/commonMethod.js';

export default {
	data() {
		return {
			currentUser: "",//当前用户
			account: '',//账户金币
			withdrawMoney: '',//提现金额
			serviceCharge: "",//提现手续费
			verificationCode: '',//提现验证码
			show: false,//不显示弹框
			preWithdrawMoney: '',//可提现金额
			openId:'',
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	async mounted() {
		const res = await commonApi.currentUserAxios();
		this.currentUser = res.data.session_user_h5;
		console.log(this.currentUser);
		this.account = this.currentUser.account / 100
		
		await this.getOpenId()
		
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	watch:{
		verificationCode:function(val){
			if(val.length == 6){
				this.toWithdraw()
			}
		}
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"取现")
		  			
		},
		getOpenId(){
			var that = this
			uni.login({
				provider: 'weixin', //使用微信登录获取code
				success: function (loginRes) {
					
					console.log(that.currentUser)
					//使用微信code获取openid
					commonApi.getOpenId(loginRes.code).then(res => {
						console.log(res);
						that.openId = res.data.openid;
						console.log(that.openId);
					})
				}
			})
		},
		//关闭弹窗
		close() {
			//todo 重置数据
			this.show = false
		},
		//获取费率,计算可提现金额
		toPreWithdraw() {
			const that = this
			if (!this.withdrawMoney) {
				uni.showModal({
					title: "",
					content: "请输入提现金额",
					showCancel:false,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			}
			//发送验证码
			// this.getCheckCode();
			console.log("openId");
			console.log(this.openId);
			commonApi.preWithdrawal(that.currentUser.id,that.withdrawMoney,that.openId).then(response => {
					that.show = true;
					taht.preWithdrawMoney = response.data.map.total_fee / 100;
					that.serviceCharge = response.data.map.serviceCharge / 100;
			})
		

			
		},
		//获取短信验证码
		getCheckCode() {
			console.log("短信验证");
			// slideCheck({
			// 	phone: this.currentUser.phone,
			// 	countdown: () => {
			// 	},
			// 	success:(res)=>{
			// 		this.$nextTick(() => {
			// 			this.$refs.codeInput.focus()
			// 		})
			// 	},
			// 	error:(res)=>{
			// 		alert(res)
			// 	},
			// })
			this.verificationCode = ''
		},
		//提现
		toWithdraw() {
			this.close()
			commonApi.withdrawal(this.currentUser.id,this.preWithdrawMoney,this.serviceCharge,this.openId,this.verificationCode).then(res => {
				if (res.data.code === 0) {
					uni.showModal({
						title: "",
						content: res.data.msg,
						showCancel:false,
						success: function (res) {
							var that = this
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/src/pages/person/myGold'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}.bind(this)
					});
				}
			})
		},
	}
}
</script>

<style>
	image{
		width: 100%
	}
	.withdraw .bg {
	    position: relative;
	}
	.withdraw .enter {
	    background-color: #ffffff;
	    border-radius: 0rpx;
	    width: 92%;
	    left: 4%;
	    height: calc(100% - 75px);
	    top: 112rpx;
	    position: fixed;
	    text-align: center;
	}
	.withdraw .enter .withdraw-amount {
	    padding: 0px 28rpx;
	}
	.withdraw .enter .withdraw-amount .amount-price {
	    align-items: flex-start;
	    flex-wrap: nowrap;
	    border-bottom: 1.5rpx solid #ebebeb;
	    padding-bottom: 14rpx;
		display: flex;
	}
	.withdraw .enter .withdraw-amount .amount-price .span {
	    color: #3d4d6e;
	    font-size: 40px;
	    flex-shrink: 0;
	}
	.withdraw .enter .withdraw-amount .amount-price .price {
	    width: 100%;
	    flex-shrink: 1;
	    height:  84rpx;
	    font-size: 13px;
	    margin-top: 14rpx;
	    border: 0px;
	    padding-left: 7rpx;
		display: flex;
	}
	.withdraw .enter .withdraw-amount .amount-all {
	    margin-top: 28rpx;
		display: flex;
		justify-content: space-between;	
		align-items: center;
		flex-wrap: wrap;
	}
	.withdraw .enter .withdraw-amount .amount-all view:first-child {
	    color: #8f9aa8;
		display: flex;
		
	}
	.withdraw .enter .withdraw-amount .amount-all view:first-child .span {
	    color: #333333;
	}
	.withdraw .enter .withdraw-amount .amount-all view:last-child {
	    color: #029e9d;
	}
	.withdraw .enter .withdraw-amount .btn {
	    position: absolute;
	    bottom: 121rpx;
	    left: 0;
	    width: 100%;
	    color: #8f9aa8;
	}
	.withdraw .enter .withdraw-amount .btn .button {
	    height: 82rpx;
	    background-color: #029e9d;
	    width: 75%;
	    margin: 73rpx auto;
	    color: #ffffff;
	    border-radius: 40rpx;
	    border: 0px;
	    font-size: 17px;
		line-height: 82rpx;
	}
	.withdraw .enter .withdraw-amount .btn .text {
	    color: #8f9aa8;
	}
	.popup-module, .popup-bg {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0px;
	    top: 0px;
	    z-index: 99;
	    background-color: rgba(0, 0, 0, 0.4);
	    display: flex;
	    flex-wrap: nowrap;
	    align-items: center;
	    justify-content: center;
	}
	.popup-bg {
	    z-index: -1;
	}
	.withdraw02-popup .popup-content {
	    background-color: #ffffff;
	    width: 80%;
	    border-radius: 14rpx;
	}

	.popup-content {
	    width: 100%;
	    position: relative;
	    z-index: 100;
	}
	.withdraw02-popup .popup-content .header {
	    line-height: 90rpx;
	    font-size: 16px;
	}
	.withdraw02-popup .popup-content .header image {
	    width: 35rpx;
	    padding: 28rpx;
	    margin-right: 90rpx;
	}
	.withdraw02-popup .popup-content .price-title {
	    text-align: center;
	    font-size: 16px;
	    padding: 50rpx 0px 21rpx;
	}
	.withdraw02-popup .popup-content .price-money {
		text-align: center;
		font-weight: bold;
		font-size: 32px;
		margin: 0px 28rpx;
		padding-bottom: 28rpx;
		border-bottom: 1.exrpx solid #ebebeb;
	}
	.withdraw02-popup .popup-content .price-money .span {
	    font-size: 18px;
	    vertical-align: top;
	    margin-top: 11rpx;
	    display: inline-block;
	}
	.withdraw02-popup .popup-content .price-num {
		padding: 0  28rpx;
		margin-top: 21rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.withdraw02-popup .popup-content .pwd {
		padding: 35rpx 28rpx 35rpx;
	}
	.withdraw02-popup .popup-content .pwd input {
	    width: 97%;
	    border: 1px solid #EBEBEB;
	    line-height: 77rpx;
	    padding-left: 3%;
	    border-radius: 14rpx;
	    font-size: 28rpx;
	    text-align: center;
	}
	
</style>